<template>
  <el-row style="height: 100%;" class="consumer">
    <!-- 左边为溯源查询 -->
    <el-col :span="7" style="height: 100%;">
      <div class="grid-content bg-purple" style="margin-left:10%;margin-top: 20%">
        <el-form :model="form" ref="form">
          <h4>溯源码搜索</h4>
          <el-divider></el-divider>
          <el-form-item label="请输入您想要查询的溯源码" prop="traceNumber">
            <el-input v-model.number="form.traceNumber" type="textarea" :rows="3" autocomplete="off"
                      @clear="onSearch = false;"></el-input>
          </el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form>
      </div>
    </el-col>

    <!-- 右边为溯源查询结果 -->
    <el-col :span="16" class="grid-contents">
      <div class="grid-content bg-purple-light">

        <!-- 溯源查询成功后才展示 -->
        <div v-if="onSearch && goodDetail.length">
          <!-- 溯源详情组件， user: 3 为消费者 -->
          <TraceDetail :good-detail="goodDetail" :user="3" :block_pro="block_pro" :block_dis="block_dis"
                       :block_ret="block_ret" />
        </div>
      </div>
    </el-col>
    <el-col :span="1">
      <!--退出按钮 -->
      <el-button type="danger" @click="logout" class="button-logout">退出</el-button>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios';
import TraceDetail from '../components/TraceDetail.vue';

export default {
  components: {
    TraceDetail
  },
  name: 'Consumer',
  data() {
    return {
      form: {
        traceNumber: '',
      },
      goodDetail: '',
      onSearch: false,
      block_pro: {},
      block_dis: {},
      block_ret: {},
    };
  },
  methods: {
    logout() {
      this.$router.push({ name: 'loginview' });
      this.$emit('logout', '');
    },
    onSubmit() {
      if (!this.form.traceNumber) {
        this.$message.error('请输入溯源码');
        return;
      }
      this.onSearch = true;
      axios({
        method: 'get',
        url: `/trace?traceNumber=${this.form.traceNumber}`
      })
          .then(ret => {
            this.goodDetail = ret.data || [];
            this.block_pro = this.$blockInfo.getBlockInfo("Pro" + ret.data[0].traceNumber);
            axios({
              method: 'post',
              url: `/getBlockInfo`,
              data: {
                type: "producer",
                traceNumber: ret.data[0].traceNumber
              }
            }).then(ret => {
              this.block_pro = ret.data.blockInfo;
            });

            axios({
              method: 'post',
              url: `/getBlockInfo`,
              data: {
                type: "distributor",
                traceNumber: ret.data[0].traceNumber
              }
            }).then(ret => {
              this.block_dis = ret.data.blockInfo;
            });

            axios({
              method: 'post',
              url: `/getBlockInfo`,
              data: {
                type: "retailer",
                traceNumber: ret.data[0].traceNumber
              }
            }).then(ret => {
              this.block_ret = ret.data.blockInfo;
            });

          })
          .catch(err => {
            console.log(err);
            alert("暂无信息");
          });
    }
  }
};
</script>

<style scoped>
/* 溯源查询框 */
.grid-content.bg-purple {
  padding: 20px;
  background-color: #f4f4f9;
  border: 1px solid #e0e0e0;
  border-radius: 10px; /* 添加圆角 */
  transition: all 0.3s ease; /* 过渡动画 */
}

.grid-content.bg-purple:hover {
  transform: scale(1.02); /* 鼠标悬停时放大效果 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}


/* 退出按钮 */
.button-logout {
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 5px; /* 按钮圆角 */
}

/* 其他样式保持不变 */
</style>


